<template>
  <view :style="colorStyle">
    <view class="infobox1">
      <view class="block1 c1F1F1F f32 fontWeight"> 售后进度 </view>
      <view class="list">
        <view
          class="block2 flex"
          v-for="(item, index) in info.refundLogList"
          :key="item.id"
        >
          <view
            class="border"
            :style="{ background: `${index > 0 ? '#cccccc' : ''}` }"
            v-if="index !== info.refundLogList.length - 1"
          >
          </view>
          <view
            class="info1 flex aitems jcenter"
            :style="{ border: `${index > 0 ? '1px solid #cccccc' : ''}` }"
          >
            <view
              class="tip1"
              :style="{ background: `${index > 0 ? '#cccccc' : ''}` }"
            >
            </view>
          </view>
          <view class="info2">
            <view class="tip1 themeColor f32 fontWeight" v-if="index == 0">
              {{ item.remark }}
            </view>
            <view class="tip1 c858585 f32 fontWeight" v-if="index > 0">
              {{ item.remark }}
            </view>
            <view class="tip2 c858585 f24">
              {{ item.createTime }}
            </view>
            <!-- <view class="tip3 themeColor">
							商家备注：检查没事
						</view> -->
          </view>
        </view>
        <!-- <view class="block2 flex">
					<view class="border" :style="{background:'#cccccc'}">

					</view>
					<view class="info1 flex aitems jcenter" :style="{border:'1px solid #cccccc'}">
						<view class="tip1" :style="{background:'#cccccc'}">

						</view>
					</view>
					<view class="info2">
						<view class="tip1 c858585 f32 fontWeight">
							售后申请已提交，等待商家审核
						</view>
						<view class="tip2 c858585 f24">
							2023-05-05 17:34:31
						</view>
					</view>
				</view> -->
        <!-- <view class="block2 flex">
					<view class="info1 flex aitems jcenter" :style="{border:'1px solid #cccccc'}">
						<view class="tip1" :style="{background:'#cccccc'}">

						</view>
					</view>
					<view class="info2">
						<view class="tip1 c858585 f32 fontWeight">
							售后申请已提交，等待商家审核
						</view>
						<view class="tip2 c858585 f24">
							2023-05-05 17:34:31
						</view>
					</view>
				</view> -->
      </view>
    </view>

    <view class="infobox3" v-if="info.refundStatus == -1">
      <view class="cell flex aitems between">
        <view class="block1 c1F1F1F f32"> 驳回原因 </view>
        <view class="block2 cF65B49 f32 fontWeight">
          {{ info.sellerMsg ? info.sellerMsg : "--" }}
        </view>
      </view>
    </view>

    <view class="infobox3">
      <view class="cell flex aitems between">
        <view class="block1 c1F1F1F f32"> 退款现金 </view>
        <view class="block2 cF65B49 f32 fontWeight">
          ￥{{ info.refundMoney }}
        </view>
      </view>
    </view>
    <view class="infobox3">
      <view class="cell flex aitems between">
        <view class="block1 c1F1F1F f32"> 退款积分 </view>
        <view class="block2 cF65B49 f32 fontWeight">
          {{ info.returnDeductIntegral }}积分
        </view>
      </view>
    </view>

    <view
      class="infobox4"
      v-if="
        info.refundType == 2 &&
        (info.refundStatus == 1 || info.refundStatus == 2)
      "
    >
      <view class="block1 flex aitems between">
        <view class="info1 c1F1F1F f32 fontWeight"> 退货地址 </view>
        <image
          src="@/static/img42.png"
          mode=""
          @click="
            copy(
              info.refundAddr.consignee +
                info.refundAddr.mobile +
                info.refundAddr.province +
                info.refundAddr.city +
                info.refundAddr.district +
                info.refundAddr.address
            )
          "
        ></image>
      </view>
      <view class="block2 c323232 f28">
        {{ info.refundAddr.province }} {{ info.refundAddr.city }}
        {{ info.refundAddr.district }} {{ info.refundAddr.address }}
      </view>
      <view class="block3 flex aitems c858585 f24">
        <view class="info1">
          {{ info.refundAddr.consignee }}
        </view>
        <view class="info2">
          {{ info.refundAddr.mobile }}
        </view>
      </view>
    </view>

    <view
      class="infobox3"
      v-if="
        info.refundType == 2 &&
        (info.refundStatus == 2 || info.refundStatus == 3)
      "
    >
      <view class="title c1F1F1F f32 fontWeight flex aitems between">
        退货物流信息
        <image
          v-if="info.logisticsType == 1"
          src="@/static/img42.png"
          mode=""
          @click="copy(info.logisticsName + info.logisticsNo)"
        ></image>
      </view>
      <view class="cell flex aitems between" v-if="info.logisticsType == 1">
        <view class="block1 c858585 f32"> 快递公司: </view>
        <view class="block2 c1F1F1F f28 flex aitems">
          {{ info.logisticsName }}
        </view>
      </view>
      <view class="cell flex aitems between" v-if="info.logisticsType == 1">
        <view class="block1 c858585 f32"> 快递单号 </view>
        <view class="block2 c1F1F1F f28 flex aitems">
          {{ info.logisticsNo }}
        </view>
      </view>
      <view class="cell flex aitems between" v-if="info.logisticsType == 2">
        <view class="block1 c858585 f32"> 到店退货 </view>
        <view class="block2 c1F1F1F f28 flex aitems"> --- </view>
      </view>
    </view>

    <view class="infobox3">
      <view class="title c1F1F1F f32 fontWeight"> 订单信息 </view>
      <view class="cell flex aitems between">
        <view class="block1 c858585 f32"> 售后单号 </view>
        <view class="block2 c1F1F1F f28 flex aitems">
          {{ info.refundNo }}
          <image
            src="@/static/img42.png"
            mode=""
            @click="copy(info.refundNo)"
          ></image>
        </view>
      </view>
      <view class="cell flex aitems between">
        <view class="block1 c858585 f32"> 订单编号 </view>
        <view class="block2 c1F1F1F f28 flex aitems">
          {{ info.orderNo }}
        </view>
      </view>
      <view class="cell flex aitems between">
        <view class="block1 c858585 f32"> 售后类型 </view>
        <view class="block2 c1F1F1F f28 flex aitems">
          {{
            info.refundType == 1
              ? "退款"
              : info.refundType == 2
              ? "退货退款"
              : ""
          }}
        </view>
      </view>
      <view class="cell flex aitems between">
        <view class="block1 c858585 f32"> 退款件数 </view>
        <view class="block2 c1F1F1F f28 flex aitems">
          {{ info.goodsNum }}
        </view>
      </view>
      <view class="cell flex aitems between" v-if="info.buyerMsg">
        <view class="block1 c858585 f32"> 退款说明 </view>
        <view class="block2 c1F1F1F f28 flex aitems">
          {{ info.buyerMsg }}
        </view>
      </view>
      <view class="cell flex between" v-if="info.buyerImg">
        <view class="block1 c858585 f32"> 退款凭证 </view>
        <view
          class="block2 c1F1F1F f28 flex aitems wrap"
          style="justify-content: flex-end"
        >
          <view
            class="img"
            v-for="(item, index, key) in info.buyerImg.split(',')"
            :key="key"
            @click="previewImg(index)"
          >
            <image :src="item" mode="aspectFill"></image>
          </view>
        </view>
      </view>
    </view>

    <view
      class="infobox5 f32 cfff"
      v-if="info.refundStatus == 0"
      @click="orderRefundCancel"
    >
      取消申请
    </view>
    <view
      class="infobox5 f32 cfff"
      v-if="info.refundStatus == 1"
      @click="gourl(`/pages/refund/sentBack?id=${info.id}`)"
    >
      填写退货
    </view>
    <view
      class="infobox5 f32 cfff"
      v-if="info.refundStatus == 2"
      @click="gourl(`/pages/refund/sentBack?id=${info.id}`)"
    >
      修改物流信息
    </view>

    <view class="" style="height: 100rpx"> </view>
  </view>
</template>

<script>
import { orderRefundInfo, orderRefundCancel } from "@/servers/servers.js";
import { HTTP_STATUS } from "@/servers/config.js";
import { getToken, setStorage } from "../../utils/storage";
import colors from "@/mixins/color";
import { loading, msg, go, showModal } from "../../utils/wxAPI";
import { logisticsType, refundStatusEn, orderStatus } from "@/keys/keys";
export default {
  mixins: [colors],
  data() {
    return {
      options: {},
      info: {},
    };
  },
  async onLoad(options) {
    this.options = options;
    // if (getToken()) {
    // 	this.orderInfo()
    // }
  },
  async onShow() {
    if (getToken()) {
      this.orderRefundInfo();
    }
  },
  methods: {
    async orderRefundInfo() {
      loading();
      let { data } = await orderRefundInfo({
        id: this.options.id,
      });
      if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        let info = data.data;
        // info.refundLogList = info.refundLogList.reverse();
        // info.deductPublicityDetail = JSON.parse(info.deductPublicityDetail)
        // info.orderDetailList.map(item => {
        // 	item.check = false
        // })
        this.info = info;
      }
      uni.stopPullDownRefresh();
      uni.hideLoading();
    },
    async orderRefundCancel() {
      showModal({
        t2: "是否将该售后单取消？",
      })
        .then(async () => {
          loading();
          let { data } = await orderRefundCancel({
            id: this.info.id,
          });
          if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
            msg(data.msg);
            setStorage("refundRef", 1);
            this.orderRefundInfo();
          }
          uni.hideLoading();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    copy(data) {
      uni.setClipboardData({
        data,
        success() {
          msg("复制成功");
        },
      });
    },
    gourl(url) {
      go(url);
    },

    previewImg(index) {
      wx.previewImage({
        current: index,
        urls: this.info.buyerImg,
      });
    },
  },
  onPullDownRefresh() {
    this.orderRefundInfo();
  },
};
</script>
<style>
/* #ifdef MP-WEIXIN */
page {
  background: #f5f5f5;
}

/* #endif */
</style>
<style lang="scss" scoped>
page {
  background: #f5f5f5;
}

.infobox1 {
  padding: 36rpx 24rpx;
  background: #fff;
  border-radius: 28rpx;
  margin: 30rpx 30rpx 0;

  .list {
    .block2 {
      position: relative;
      margin: 36rpx 0 48rpx;

      .border {
        position: absolute;
        width: 1px;
        bottom: -48rpx;
        background: var(--view-theme);
        left: 22rpx;
        top: 46rpx;
      }

      .info1 {
        position: relative;
        top: 2rpx;
        width: 44rpx;
        height: 44rpx;
        border-radius: 50%;
        border: 1px solid var(--view-theme);

        .tip1 {
          background: var(--view-theme);
          border-radius: 50%;
          width: 36rpx;
          height: 36rpx;
          /* #ifdef H5 */
          width: 34rpx;
          height: 34rpx;
          /* #endif */
        }
      }

      .info2 {
        margin-left: 20rpx;
        width: calc(100% - 20rpx - 44rpx);

        .tip1 {
        }

        .tip2 {
          margin: 16rpx 0 0;
        }

        .tip3 {
          margin: 18rpx 0 0;
          padding: 30rpx 24rpx;
          border-radius: 28rpx;
          background: var(--view-op-ten);
        }
      }
    }
  }
}

.infobox3 {
  padding: 20rpx 24rpx;
  background: #fff;
  border-radius: 28rpx;
  margin: 30rpx 30rpx 0;

  .title {
    margin: 0 0 16rpx 0;

    image {
      width: 32rpx;
      height: 32rpx;
    }
  }

  .cell {
    padding: 16rpx 0;

    .block1 {
      min-width: 200rpx;
    }

    .block2 {
      image {
        width: 32rpx;
        height: 32rpx;
        margin-left: 10rpx;
      }

      .img {
        image {
          width: 140rpx;
          height: 140rpx;
          border-radius: 28rpx;
          margin: 0 0 10rpx 10rpx;
        }
      }
    }
  }
}

.infobox4 {
  padding: 32rpx 24rpx;
  background: #fff;
  border-radius: 28rpx;
  margin: 30rpx 30rpx 0;

  .block1 {
    .info1 {
    }

    image {
      width: 32rpx;
      height: 32rpx;
    }
  }

  .block2 {
    margin: 24rpx 0;
  }

  .block3 {
    .info1 {
    }

    .info2 {
      margin-left: 32rpx;
    }
  }
}

.infobox5 {
  background: var(--view-theme);
  border-radius: 44rpx;
  margin: 84rpx 30rpx 0;
  padding: 24rpx 0;
  text-align: center;
}
</style>
